import { memo, useEffect, useState } from 'react';
import { Tooltip } from 'antd';

import Icons from '@/svg-icons/index.js';

function SvgIcon(props) {
    const {
        svgName,
        iconSize = 24,
        iconColor = '#000000',
        hasHover = false,
        hoverColor = '#000000',
        className,
        needPointer = false,
        toolTipValue
    } = props;
    
    const [svgColor, setSvgColor] = useState(iconColor);
    const [Icon, setIcon] = useState(Icons[svgName]);
    
    const handleMouseEnter = () => {
        if (hasHover) {
            setSvgColor(hoverColor);
        }
    };

    const handleMouseLeave = () => {
        if (hasHover) {
            setSvgColor(iconColor);
        }
    };

    useEffect(() => {
        setIcon(Icons[svgName]);
    }, [svgName]);

    return (
        <Tooltip title={toolTipValue} arrow={false}>
            <div
                id="svg-icon"
                style={{
                    width: iconSize,
                    height: iconSize,
                    cursor: needPointer ? 'pointer' : 'normal'
                }}
                className={className}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                <Icon svgColor={svgColor} />
            </div>
        </Tooltip>
    );
}

export default memo(SvgIcon);